<template>
    <div>
      <!-- 顶部菜单栏 -->
      <nav class="header">
      <div class="left-menu">
        <a  class="menu-item"  @click="goTo('saleIndex')">首页</a>
        <a  class="menu-item" :class="{'active':activeMenu === 'salesCloudProducts'}" @click="goTo('saleProducts')">产品</a>
      </div>
      <div class="right-menu">
        <a v-if="!token" class="menu-item"  @click="goTo('login')">登录</a>
        <a  class="menu-item" v-if="!token"  @click="goTo('register')">注册</a>
        <a   v-else >
          <el-dropdown >
            <span class="menu-item" >
              {{user}}
            </span>
            <el-dropdown-menu slot="dropdown" style="font-size: 16px !important;">
              <el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>
              <el-dropdown-item @click.native="goTo('')">后台管理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </a>
      </div>
    </nav>

      <!-- 滚动 -->
      <div class="scrollable-content">
          <!-- 搜索框 -->
          <div style="width: 100%;padding-top: 10px;padding-bottom: 10px;margin-bottom: 5%;background-color: #fff">
            <el-input
            placeholder="请输入想要查找产品"
            v-model="input"
            clearable
            type="text"
            style="width: 36%;text-align: center;margin-top: 4%;margin-bottom: 4%;margin-left: 30%;margin-right: 1%;font-size: 16px;">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="selectProductName(input)">搜索</el-button>
          </div>

        <!-- 下拉框 -->
         <div class="kind" style="text-align: center;height: 60px;background-color: #fff;margin: 4%;padding: 1%;border-radius: 4px;">
          <el-button style="display: inline;background-color: #fff;border: none;padding-right: 0;font-size: 18px;"  :class="{ 'active1': activeItem === 'defaultButton' }" @click="ActiveDefaultButton">全部类型</el-button>
            <el-dropdown v-for="dict in dict.type.sys_product_kind" :key="index"  style="margin-left: 5%;font-size: 18px;cursor: pointer;" :class="{ 'active1': activeParent === dict.value }">
              <span class="el-dropdown-link" >
                {{ dict.label }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
<!--              <el-dropdown-menu slot="dropdown" >-->
<!--                <el-dropdown-item style="font-size: 16px !important;" v-for="(child,childIndex) in productsClassID.children" :key="childIndex" :class="{ 'active1': activeItem === child.dictKey }" @click.native="setActiveItem(child.dictKey,productsClassID.dictValue)">{{child.dictValue}}</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
            </el-dropdown>
         </div>

<!-- 产品列表 -->
        <div v-if="products.length">
          <el-row  style="margin-bottom: 2%;">
            <el-col  v-for="(item,index) in products" :key="index" style="width: 28%;margin-left: 4%;margin-bottom: 2%;">
              <div class="grid-content bg-purple">
                <el-card :body-style="{ padding: '0px' }">
                  <div class="image-container" @mouseenter="hover = true" @mouseleave="hover = false" @click="goToDetail(item.id)">
                    <img v-if="item.productImage != ''"  :src="item.productImage" height="200px" width="100%">
                    <el-empty style="height: 200px;margin-bottom: 20px;display: block;text-align: center;" v-else>
                    <img src="http://113.125.185.48:9000/bladex/upload/20240624/53a2717bab52e273e639009b0779cf9c.png" height="160px" alt="">
                    <div style="font-size: 18px;color: #909399;">
                      暂无商品图片
                    </div>
                  </el-empty>
                    <div class="overlay" v-show="hover">
                      <el-link :underline="false" ><el-button style="background-color: rgba(0, 0, 0, 0);border: none;font-size: 18px" icon="el-icon-view" >查看详情</el-button></el-link>
                    </div>
                  </div>

                    <div style="text-align: center;padding-bottom: 10px;padding-top: 10px;">
                      <h2 style="text-align: center;margin-bottom: 10px;display: inline;" >{{ item.productName }}</h2>
                      <el-tag color="#ff7a45" style="color: #fff;margin-left: 10px;margin-bottom: 10px;" >NEW</el-tag>
                      <div>{{item.productOneSentencIntroduction}}</div>
                    </div>

                    <!-- 产品价格 -->
                    <div style="height: 40px;margin-left: 30%;">
                      <div style="display: inline-block;color: rgba(255, 0, 0, 0.6);">折扣价：</div>
                      <div style="color: rgba(0,0,0,0.5);display: inline-block;text-decoration: line-through solid #a1a1a1;">{{ item.quotedPrice }} </div>
                      <div style="font-size: 20px;display: inline-block;margin-left: 8px;color: rgba(255, 0, 0, 0.6);font-weight: bold;">{{ item.discountPrice }} </div>
                    </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: center;font-size: 20px;margin-bottom: 2%;">
          </el-pagination>
        </div>
        <el-empty style="height: 300px;margin-bottom: 100px;text-align: center;" v-else>

        </el-empty>

        <div style="height: 100px;width: 100%;background-color: #000;text-align: center;font-size: 16px;color: #fff;">
          <div style="padding-top: 40px;">版权所有：燎原第二小组©2024年</div>
        </div>
      </div>
    </div>
  </template>

  <script>
import { getToken } from '@/utils/auth';
  export default {
    name: 'App',
    dicts: ['sys_product_kind'],
    data() {
      return {
        input:'',
        products:[],
        hover: false,
        //类型
        activeMenu:'salesCloudProducts',
        activeItem:'defaultButton',
        activeParent:'',
        currentPage: 1,
        total: 0,
        // page: {
        //   current: 1,
        //   size: 3,
        // },
        // query:{
        //   productName:'',
        //   classId:0,
        // },
        // productsClassID:[],
        user:'',
        token:''
      }
    },
    created(){
      // this.onLoad(this.page);
      this.getUser();
      // this.getProductsClassID();
    },

    methods: {
      // 高亮
      setActiveItem(child,parent) {
      this.activeItem = child; // 设置当前高亮的项为点击的项
      this.activeParent = parent; // 记录当前父项
      this.query.classId = child;
      this.onLoad(this.page,this.query);

    },
      ActiveDefaultButton() {
        this.activeItem = 'defaultButton'; // 点击默认按钮时重新高亮
        this.activeParent = ''; // 点击默认按钮时清除父项
        this.query.classId = 0;
        this.onLoad(this.page,this.query);
      },
      // 分页
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.page.size = val;
        this.page.current = 1;
        this.onLoad(this.page,this.query);
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page.current = val;
        // this.onLoad(this.page,this.query);
      },
      goTo(item) {
       this.$router.push('/'+item);
       this.changeColor(item);
      },
      changeColor(index) {
        this.activeMenu = index;
      },
      // 加载产品列表
      // onLoad(page, params = {}) {
      //   getList(page.current, page.size,params).then(res => {
      //     const data = res.data.data;
      //     this.products = data.records;
      //     this.total = data.total;
      //   });
      // },
      // 条件查询
      // selectProductName(params){
      //   this.query.productName = params
      //   this.page.current = 1;
      //   this.onLoad(this.page,this.query);
      // },
      // 产品类型
      // getProductsClassID(){
      //   getProductsTree().then(res =>{
      //     // console.log(res.data.data[0].children);
      //     this.productsClassID = res.data.data[0].children
      //   })
      // },
      // 用户信息
      getUser(){
      this.token = getToken() === undefined ? '' : getToken();
      this.user = this.$store.state.user.name;
    },
      // 退出登录
      handleLogout() {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        localStorage.clear(); //清除localStorage数据;
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/salesCloudProductIndex" });
          location.reload();
        });
      });
    },
      //查看详情
    // goToDetail(id){
    //   if(!this.token){
    //     this.$router.push({ path: "/salesCloudProductLogin" });
    //   }
    //   else{
    //     this.$router.push('/salesCloudProductMain?id='+id);
    //   }

    // },
    }
  }
  </script>

  <style scoped>

/* 菜单 */
.header {
  background-color: white;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  height: 64px;
  z-index: 1000;
  font-size: 18px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
/* 移除所有虚线边框 */
*:focus {
  outline: none;
}
.menu-item {
  color: #1890ff;
  text-decoration: none;
  padding: 20px;
  transition: color 0.3s, background-color 0.3s;
  height: 100%;
  border: none;
}

.menu-item:hover{
  color: white;
  background-color: #1890ff;
}
.active {
  color: white !important;
  background-color: #1890ff !important;
}
.left-menu,
.right-menu {
  display: flex;
}

/* 滚动条 */
.scrollable-content {
  height: calc(100vh - 64px);
  overflow-y: auto;
  background-color: #dddddd42;
}

.kind .el-dropdown-link:hover{
  color: #007bff !important;
}
.active1{
  color: #007bff !important;
}

  .image-container {
  position: relative;
  width: 100%;
  height: 200px;
}


.image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-container:hover .overlay {
  opacity: 1;
}

</style>
